<template>
  <div>
    <!-- 组件1 输入搜索页面 -->
    <MySearch @parentsearch="parentSearch" @parentclick="parentClick"/>
    <!-- 组件2 订单页面 -->
    <MyTable :myarr="arr" @resetTable="initHome"/>
    <!-- 组件3 分页 -->
    <MyPage @changeSize="parentpagesize" @changePage="parentpage" :page="page" :pageSize="pageSize" :total="total"/>
  </div>
</template>

<script>
import MySearch from './comparents/MySearch.vue'
import MyTable from './comparents/MyTable.vue'
import MyPage from './comparents/MyPage.vue'
import {getHomeApi} from '../../api/financialApi'
export default {
  components:{
    MySearch,
    MyTable,
    MyPage,
  },
  data(){
    return{
      arr:[],
      page:1,
      pageSize:20,
      total:0,
      keyword:'',
    }
  },
  mounted() {
    //发送我们的请求, 数组是我们的共享数据, 
    this.initHome()
  },
  methods: {
    parentSearch(val){
      this.keyword = val
      this.initHome()
    },
    parentpagesize(val){
      this.pageSize = val
      this.page = 1
      this.initHome()
    },
    parentpage(val){
      this.page = val
      this.initHome()
    },
    parentClick(val){
      this.keyword = val
      this.initHome()
    },
    initHome(){
      var params = {
        keyword:this.keyword,
        page:this.page,
        pageSize:this.pageSize
      }
      getHomeApi(params).then(res=>{
        if(res.code == 200){
          this.arr = res.data
          this.total = res.total
        }
      })
    }
  },
}
</script>

<style>

</style>